<!--
 * Copyright (c) 2009 Regents of the University of California (Regents). Created
 * by TELS, Graduate School of Education, University of California at Berkeley.
 *
 * This software is distributed under the GNU Lesser General Public License, v2.
 *
 * Permission is hereby granted, without written agreement and without license
 * or royalty fees, to use, copy, modify, and distribute this software and its
 * documentation for any purpose, provided that the above copyright notice and
 * the following two paragraphs appear in all copies of this software.
 *
 * REGENTS SPECIFICALLY DISCLAIMS ANY WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE. THE SOFTWAREAND ACCOMPANYING DOCUMENTATION, IF ANY, PROVIDED
 * HEREUNDER IS PROVIDED "AS IS". REGENTS HAS NO OBLIGATION TO PROVIDE
 * MAINTENANCE, SUPPORT, UPDATES, ENHANCEMENTS, OR MODIFICATIONS.
 *
 * IN NO EVENT SHALL REGENTS BE LIABLE TO ANY PARTY FOR DIRECT, INDIRECT,
 * SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, INCLUDING LOST PROFITS,
 * ARISING OUT OF THE USE OF THIS SOFTWARE AND ITS DOCUMENTATION, EVEN IF
 * REGENTS HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author: Hiroki Terashima
-->
<html>
<head>

<script type="text/javascript" src="../common/js/loadxmldoc.js"></script>
<!-- YUI Seed -->
<script src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript" src="../common/js/helperfunctions.js"></script>
<script type="text/javascript" src="matchsequenceyui.js"></script>
<script type="text/javascript" src="matchsequencestate.js" ></script>
<script type="text/javascript" src="matchsequencefeedback.js" ></script>
<script type="text/javascript" src="matchsequencebucket.js" ></script>
<script type="text/javascript" src="matchsequencechoice.js" ></script>
<script type="text/javascript" src="matchsequence.js" ></script>      
          
<link rel="stylesheet" type="text/css" href="../common/css/htmlAssessment.css" />
<link rel="stylesheet" type="text/css" href="matchstyles.css" />
<link rel="stylesheet" type="text/css" href="../common/css/niftyCorners.css" />

<script type="text/javascript">
var ms;   // global variable so it can be accessed by other functions
var currentStateXML;  // global variable containing current state as xml string
var ddList = [];  // list of all draggable nodes
var currentState;   // current state;

function renderMS() {
  var xmlDoc=loadXMLDoc("matchsequence_sample3.xml");
  ms = new MS(xmlDoc);
  ms.render();
}
		
/**
 * xmlString contains QTI-coded xml content
 */
function loadXMLString(xmlString) {
	  var xmlDoc=loadXMLDocFromString(xmlString);	
	  ms = new MS(xmlDoc);
	  ms.render();	
}
</script>

<!--  Javascript Pop up window -->
<script type="text/javascript">

var newWin = null;
function popUp(strURL, strType, strHeight, strWidth) {
 if (newWin != null && !newWin.closed)
   newWin.close();
 var strOptions="";
 if (strType=="console")
   strOptions="resizable,height="+
     strHeight+",width="+strWidth;
 if (strType=="fixed")
   strOptions="status,height="+
     strHeight+",width="+strWidth;
 if (strType=="elastic")
   strOptions="toolbar,menubar,scrollbars,"+
     "resizable,location,height="+
     strHeight+",width="+strWidth;
 newWin = window.open(strURL, 'newWin', strOptions);
 newWin.focus();
}

</script>

<!--  Nifty Cube for Rounded Corners -->

<script type="text/javascript" src="../common/js/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#locationBar","bottom,small");
Nifty("div#questionCountBox","big, all");
Nifty("div#playContainer","big, all");
}
</script>

</head>

<body>

<div id="centeredDiv">

<div id="locationBar">
	<div class="Unit1">Unit X</div>
    <div class="stepTypeLabel"><a href="teacherCheckInfoBox.html" onclick="popUp(this.href,'console',480,640);return false;" target="_blank">Teacher Check</a></div>
    <div class="teacherCheckIcon"></div>
</div>

<div id="questionCountBox" class="BG3">
	<table id="questionNumberTypeTable">
		<tr>
		<td id="questionNumber">question x of y</td>
	    <td id="questionType">Match</td>
		<td id="questionHelp"><a href="instructionsOpenResponse.html" onclick="popUp(this.href,'console',480,640);return false;" target="_blank">Info</a></td>
		</tr>
		</tr>
	</table>
</div>   <!-- end of questionNumberBox -->

<div id="promptDiv">Prompt goes here. This text will automatically be replaced by actual prompt.
</div>

<div id="playContainer">
	<div id="play"></div>
</div>

<div id="feedbackDiv">
</div>

<table id="status">
<tr>
	<th><i>Results:</i></th>
	<td><p><b>x green, y red, z yellow.</b>Hint: Move red choices into a different Target box.  
	Move yellow choices into a different position within the current Target box.</td>
</tr>
<tr><td></td><td></td></tr>
<tr>
	<th><b>Number of Checks until reset:<b></th>
	<td>5</td>
</tr>
<tr>
	<th>Total Number of Checks so far:</th>
	<td>xx</td>
<tr>
</table>
	
<!-- Anchor-Based Button Layout -->
<div class="buttonDiv">
	<ul id="buttonsUL">
		<li><a href="#" id="checkAnswerButton" onClick="javascript:ms.checkAnswer();" >Check Answers</a></li>
   		<li><a href="#" id="nextQuestionButton" onClick="" class="disabledLink" >Next Question</a></li>
   	</ul>
<div id="submitbuttonDiv">
    <a href="#" id="checkAnswerButton" onClick="javascript:ms.checkAnswer();">Check Answers</a>
    <!-- <a href="#" id="resetWrongChoicesButton" onClick="javascript:ms.resetWrongChoices();">Reset Wrong Choices</a>   -->
    <a href="#" id="resetAllButton" onClick="javascript:ms.reset();">Reset All Choices</a>
</div>




</div>   <!-- end centered Div -->

<script type="text/javascript">
renderMS();
</script>

<script type="text/javascript">
renderMS();
</script>
</body>
</html>
